<template>
  <div>
    <el-dialog v-model="deleteBuildingDialogVisible" title="提示" width="30%">
      确定要删除吗？
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="deleteBuildingDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmBuildingDeletion"
            >确 定</el-button
            >
          </span>
      </template>
    </el-dialog>
    <el-dialog v-model="addBuildingDialogVisible" title="提示" width="30%">
      请输入要添加的教学楼的名称：
      <el-input style="width: 70%" v-model="buildingToBeAdded"></el-input>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="addBuildingDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmBuildingAddition">确 定</el-button>
          </span>
      </template>
    </el-dialog>
    <el-dialog v-model="addRoomDialogVisible" title="提示" width="30%">
      请输入要添加的教室的名称：
      <el-input style="width: 70%" v-model="roomToBeAdded"></el-input>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="addRoomDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmRoomAddition">确 定</el-button>
          </span>
      </template>
    </el-dialog>
    <div style="margin: 10px 0">
      <el-button type="primary" @click="addBuilding" v-if="!searchMode">添加教学楼</el-button>
      <el-input v-model="keyword" placeholder="请输入关键字" style="width: 20%" clearable/>
      <el-button type="primary" style="margin-left: 5px" @click="searchInfo">查询</el-button>
      <el-button type="primary" @click="searchMode=false;this.load()" v-if="searchMode">取消</el-button>
    </div>
    <section v-if="!searchMode">
      <div>
        <el-collapse v-model="activeNames" style="width: 100%" v-loading="">
          <el-collapse-item
              v-for="item in buildingList"
              :key="item.name"
              :name="item.name"
              :title="item.label"
          >
            <div style="margin: 10px 0">
              <el-button type="primary" @click="addRoom(item.name)">添加教室</el-button>
              <el-button type="danger" @click="deleteBuilding(item.name)">删除教学楼</el-button>
            </div>

            <div>
              <el-table :data="findResByName(item.name)" border style="width: 100%" stripe>
                <el-table-column prop="name" label="教室"/>
                <el-table-column fixed="right" label="操作" width="120">
                  <template #default="scope">
                    <el-popconfirm title="确定删除此教室？" @confirm="deleteRoom(item.name,scope.row.id)">
                      <template #reference>
                        <el-button type="danger">删除</el-button>
                      </template>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>

            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </section>
    <section v-else>
      <div>
        <h1 style="margin-left: 10px;color: cadetblue">教学楼搜索结果</h1>
        <el-collapse v-model="activeNames" style="width: 100%" v-loading="">
          <el-collapse-item v-if="activeNames.length===0" title="没有找到相应结果">
          </el-collapse-item>
          <el-collapse-item
              v-if="activeNames.length!==0"
              v-for="item in buildingFound"
              :key="item.name"
              :name="item.name"
              :title="item.label"
          >
            <div>
              <el-table :data="findResByName(item.name)" border style="width: 100%" stripe>
                <el-table-column prop="name" label="教室"/>
                <el-table-column fixed="right" label="操作" width="120">
                  <template #default="scope">
                    <el-popconfirm title="确定删除此教室？" @confirm="deleteRoom(item.name,scope.row.id)">
                      <template #reference>
                        <el-button type="danger">删除</el-button>
                      </template>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>

            </div>
            <div style="margin: 10px 0">
              <el-button type="primary" @click="addRoom(item.name)">添加教室</el-button>
              <el-button type="danger" @click="deleteBuilding(item.name)">删除教学楼</el-button>
            </div>

            <div>
              <el-table :data="findResByName(item.name)" border style="width: 100%" stripe>
                <el-table-column prop="name" label="教室"/>
                <el-table-column fixed="right" label="操作" width="120">
                  <template #default="scope">
                    <el-popconfirm title="确定删除此教室？" @confirm="deleteRoom(item.name,scope.row.id)">
                      <template #reference>
                        <el-button type="danger">删除</el-button>
                      </template>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>

            </div>
          </el-collapse-item>
        </el-collapse>
        <h1 style="margin-left: 10px;color: cadetblue">教室搜索结果</h1>
        <div>
          <el-table :data="this.roomFound" border style="width: 100%" stripe>
            <el-table-column prop="name" label="教室" />
            <el-table-column prop="building" label="所属教学楼"/>
            <el-table-column fixed="right" label="操作" width="120">
              <template #default="scope">
                <el-popconfirm title="确定删除此教室？" @confirm="deleteRoom(item.name,scope.row.id)">
                  <template #reference>
                    <el-button type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>

        </div>
      </div>
    </section>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "PlaceArrangement",
  components:{
  },
  data(){
    return {
      form:{},
      buildingList:[
        {
          label:"H1",
          name:"H1"
        },
        {
          label:"H2",
          name:"H2"
        }
      ],
      activeNames:[],
      activatedTables:[],
      //添加教学楼
      addBuildingDialogVisible:false,
      buildingToBeAdded:null,
      //删除教学楼
      deleteBuildingDialogVisible:false,
      buildingToBeDeleted:null,
      //添加教室
      addRoomDialogVisible:false,
      roomToBeAdded:null,
      buildingToAddIn:null,
      //搜索
      searchMode: false,
      keyword: '',
      roomFound: [],
      buildingFound: []
    }
  },
  created() {
    this.load()
    this.activeNames = []
  },
  methods:{
    load(){
      this.getBuildingList()
      this.activeNames = [];
      this.activatedTables = []
    },
    getBuildingList(){
      //TODO:需要补充这里的url
      request.get("http://124.70.179.188:8082/place/buildingList").then(res => {
        this.buildingList = res.data.data
      })
    },
    findResByName(name){
      let item=this.activatedTables.find(element=>element.name===name)
      if(item!==undefined){
        return item.data
      }
      else{
        let newTable={
          name:name,
          data:null
        }
        //TODO:需要补充这里的url
        request.get("http://124.70.179.188:8082/RoomList?buildingName=" + newTable.name).then(res => {
          if (res.code === 0) {
            newTable.data=res.data.data
          }
        })
        this.activatedTables.push(newTable)
        return newTable.data

      }
    },
    //学院增删
    addBuilding(){
      this.addBuildingDialogVisible=true
    },
    confirmBuildingAddition(){
      request.post("http://124.70.179.188:8082/place/addBuilding" + this.buildingToBeAdded).then(res => {
        // 判断是否返回成功，若失败给出失败的信息
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "添加成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load()
      })
    },
    deleteBuilding(name){
      this.deleteBuildingDialogVisible=true
      this.buildingToBeDeleted = name
    },
    confirmBuildingDeletion(){
      request.delete("http://124.70.179.188:8082/place/delBuilding?buildingName=" + this.buildingToBeDeleted).then(res => {
        // 判断是否返回成功，若失败给出失败的信息
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "删除成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load()
      })
    },
    //专业增删
    addRoom(buildingName){
      this.addRoomDialogVisible=true
      this.buildingToAddIn=buildingName
    },
    confirmRoomAddition(){
      request.put("http://124.70.179.188:8082/place/addClassroom?buildingId="+this.buildingToAddIn+"/addRoom" ,this.roomToBeAdded).then(res => {
        // 判断是否返回成功，若失败给出失败的信息
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "添加成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load()
      })
    },
    deleteRoom(buildingName,id) {
      request.delete("http://124.70.179.188:8082/place/delClassroom?classroomName="+ id +"&buildingName=" + buildingName).then(res => {
        // 判断是否返回成功，若失败给出失败的信息
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "删除成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load()
      })
    },
    searchInfo() {
      this.searchMode = true
      request.get("http://124.70.179.188:8082/room?keyword=" + this.keyword).then(res => {
            this.roomFound = res.data
          }
      )
    },
  }
}
</script>

<style scoped>

</style>